<template>
  <div class="content">
    <navBar :navBar="navBar"></navBar>
    <!-- <div class="emptyBox"></div> -->
    <div class="contentInner">
      <van-tabs
        v-model="active"
        color="#588bf7"
        title-active-color="#588bf7"
        @change="changetab"
      >
        <van-tab :title="$t('在持')">
          <div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多了')"
              @load="onLoad"
            >
              <div class="card" v-for="(item, index) in list" :key="index">
                <div class="cardline">
                  <div class="name">{{ $t("币种") }}:</div>
                  <div class="num">{{ item.bi_name }}/USD</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("杠杆倍数") }}:</div>
                  <div class="num">{{ item.multiple }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时间") }}:</div>
                  <div class="num">
                    {{ item.addtime ? getdate(item.addtime) : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时间") }}:</div>
                  <div class="num">
                    {{ item.endtime ? getdate(item.endtime) : "" }}
                  </div>
                </div>
                <!-- <div class="cardline">
                <div class="name">开仓数量(手数):</div>
                <div class="num">11111</div>
              </div> -->
                <div class="cardline">
                  <div class="name">{{ $t("交易方向") }}:</div>
                  <div class="num">
                    {{
                      item.type == 1
                        ? $t("买多")
                        : item.type == 2
                        ? $t("买空")
                        : ""
                    }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时价格") }}:</div>
                  <div class="num">{{ item.start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时价格") }}:</div>
                  <div class="num">{{ item.end_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买金额") }}:</div>
                  <div class="num">{{ item.money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("数量") }}:</div>
                  <div class="num">{{ item.num }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大亏损") }}:</div>
                  <div class="num">{{ item.max_lose_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大盈利") }}:</div>
                  <div class="num">{{ item.max_win_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("手续费") }}:</div>
                  <div class="num">{{ item.fee }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("自动平仓价格") }}:</div>
                  <div class="num">{{ item.auto_end_low_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("挂单") }}:</div>
                  <div class="num">{{ item.auto_start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("盈亏") }}:</div>
                  <div class="num">{{ item.win_money }}</div>
                </div>
                <div class="btns">
                  <div class="onebtn" @click="pingcang(item.id)">
                    {{ $t("平仓") }}
                  </div>
                  <!-- <div class="onebtn" @click="zhiying(item.id)">{{$t('设置止盈止损')}}</div> -->
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <van-tab :title="$t('挂单')">
          <div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多了')"
              @load="onLoad"
            >
              <div class="card" v-for="(item, index) in list" :key="index">
                <div class="cardline">
                  <div class="name">{{ $t("币种") }}:</div>
                  <div class="num">{{ item.bi_name }}/USD</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("杠杆倍数") }}:</div>
                  <div class="num">{{ item.multiple }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时间") }}:</div>
                  <div class="num">
                    {{ item.addtime ? getdate(item.addtime) : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时间") }}:</div>
                  <div class="num">
                    {{ item.endtime ? getdate(item.endtime) : "" }}
                  </div>
                </div>
                <!-- <div class="cardline">
                <div class="name">{{$t('开仓数量(手数)')}}:</div>
                <div class="num">11111</div>
              </div> -->
                <div class="cardline">
                  <div class="name">{{ $t("交易方向") }}:</div>
                  <div class="num">
                    {{
                      item.type == 1
                        ? $t("买多")
                        : item.type == 2
                        ? $t("买空")
                        : ""
                    }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时价格") }}:</div>
                  <div class="num">{{ item.start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时价格") }}:</div>
                  <div class="num">{{ item.end_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买金额") }}:</div>
                  <div class="num">{{ item.money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("数量") }}:</div>
                  <div class="num">{{ item.num }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大亏损") }}:</div>
                  <div class="num">{{ item.max_lose_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大盈利") }}:</div>
                  <div class="num">{{ item.max_win_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("手续费") }}:</div>
                  <div class="num">{{ item.fee }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("自动平仓价格") }}:</div>
                  <div class="num">{{ item.auto_end_low_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("挂单") }}:</div>
                  <div class="num">{{ item.auto_start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("盈亏") }}:</div>
                  <div class="num">{{ item.win_money }}</div>
                </div>
                <div class="btns">
                  <div class="onebtn">{{ $t("撤单") }}</div>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <van-tab :title="$t('已平仓')">
          <div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多了')"
              @load="onLoad"
            >
              <div class="card" v-for="(item, index) in list" :key="index">
                <div class="cardline">
                  <div class="name">{{ $t("币种") }}:</div>
                  <div class="num">{{ item.bi_name }}/USD</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("杠杆倍数") }}:</div>
                  <div class="num">{{ item.multiple }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时间") }}:</div>
                  <div class="num">
                    {{ item.addtime ? getdate(item.addtime) : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时间") }}:</div>
                  <div class="num">
                    {{ item.endtime ? getdate(item.endtime) : "" }}
                  </div>
                </div>
                <!-- <div class="cardline">
                <div class="name">开仓数量(手数):</div>
                <div class="num">11111</div>
              </div> -->
                <div class="cardline">
                  <div class="name">{{ $t("交易方向") }}:</div>
                  <div class="num">
                    {{ item.type == 1 ? "买多" : item.type == 2 ? "买空" : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时价格") }}:</div>
                  <div class="num">{{ item.start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时价格") }}:</div>
                  <div class="num">{{ item.end_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买金额") }}:</div>
                  <div class="num">{{ item.money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("数量") }}:</div>
                  <div class="num">{{ item.num }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大亏损") }}:</div>
                  <div class="num">{{ item.max_lose_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大盈利") }}:</div>
                  <div class="num">{{ item.max_win_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("手续费") }}:</div>
                  <div class="num">{{ item.fee }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("自动平仓价格") }}:</div>
                  <div class="num">{{ item.auto_end_low_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("挂单") }}:</div>
                  <div class="num">{{ item.auto_start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("盈亏") }}:</div>
                  <div class="num">{{ item.win_money }}</div>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <van-tab :title="$t('已结束')"
          ><div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多了')"
              @load="onLoad"
            >
              <div class="card" v-for="(item, index) in list" :key="index">
                <div class="cardline">
                  <div class="name">{{ $t("币种") }}:</div>
                  <div class="num">{{ item.bi_name }}/USD</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("杠杆倍数") }}:</div>
                  <div class="num">{{ item.multiple }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时间") }}:</div>
                  <div class="num">
                    {{ item.addtime ? getdate(item.addtime) : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时间") }}:</div>
                  <div class="num">
                    {{ item.endtime ? getdate(item.endtime) : "" }}
                  </div>
                </div>
                <!-- <div class="cardline">
                <div class="name">开仓数量(手数):</div>
                <div class="num">11111</div>
              </div> -->
                <div class="cardline">
                  <div class="name">{{ $t("交易方向") }}:</div>
                  <div class="num">
                    {{
                      item.type == 1
                        ? $t("买多")
                        : item.type == 2
                        ? $t("买空")
                        : ""
                    }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时价格") }}:</div>
                  <div class="num">{{ item.start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时价格") }}:</div>
                  <div class="num">{{ item.end_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买金额") }}:</div>
                  <div class="num">{{ item.money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("数量") }}:</div>
                  <div class="num">{{ item.num }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大亏损") }}:</div>
                  <div class="num">{{ item.max_lose_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大盈利") }}:</div>
                  <div class="num">{{ item.max_win_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("手续费") }}:</div>
                  <div class="num">{{ item.fee }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("自动平仓价格") }}:</div>
                  <div class="num">{{ item.auto_end_low_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("挂单") }}:</div>
                  <div class="num">{{ item.auto_start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("盈亏") }}:</div>
                  <div class="num">{{ item.win_money }}</div>
                </div>
              </div>
            </van-list>
          </div></van-tab
        >
        <van-tab :title="$t('已撤单')"
          ><div class="list">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多了')"
              @load="onLoad"
            >
              <div class="card" v-for="(item, index) in list" :key="index">
                <div class="cardline">
                  <div class="name">{{ $t("币种") }}:</div>
                  <div class="num">{{ item.bi_name }}/USD</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("杠杆倍数") }}:</div>
                  <div class="num">{{ item.multiple }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时间") }}:</div>
                  <div class="num">
                    {{ item.addtime ? getdate(item.addtime) : "" }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时间") }}:</div>
                  <div class="num">
                    {{ item.endtime ? getdate(item.endtime) : "" }}
                  </div>
                </div>
                <!-- <div class="cardline">
                <div class="name">{{$t('开仓数量(手数):</div>
                <div class="num">11111</div>
              </div> -->
                <div class="cardline">
                  <div class="name">{{ $t("交易方向") }}:</div>
                  <div class="num">
                    {{
                      item.type == 1
                        ? $t("买多")
                        : item.type == 2
                        ? $t("买空")
                        : ""
                    }}
                  </div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买时价格") }}:</div>
                  <div class="num">{{ item.start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("结束时价格") }}:</div>
                  <div class="num">{{ item.end_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("购买金额") }}:</div>
                  <div class="num">{{ item.money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("数量") }}:</div>
                  <div class="num">{{ item.num }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大亏损") }}:</div>
                  <div class="num">{{ item.max_lose_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("最大盈利") }}:</div>
                  <div class="num">{{ item.max_win_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("手续费") }}:</div>
                  <div class="num">{{ item.fee }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("自动平仓价格") }}:</div>
                  <div class="num">{{ item.auto_end_low_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("挂单") }}:</div>
                  <div class="num">{{ item.auto_start_money }}</div>
                </div>
                <div class="cardline">
                  <div class="name">{{ $t("盈亏") }}:</div>
                  <div class="num">{{ item.win_money }}</div>
                </div>
              </div>
            </van-list>
          </div></van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("合约持仓"),
        close: false,
        btn: "",
        isBlue: true,
      },
      active: 0,
      list: [],
      page: 0,
      loading: false,
      finished: false,
    };
  },

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    changetab(name, title) {
      console.log(name, title);
      this.page = 0;
      this.list = [];
      this.onLoad();
    },
    //时间戳转日期
    getdate(nS) {
      //var offset = 	new Date().getTimezoneOffset() / 60 + 1;
      //console.log(offset);
      //var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(nS*1000);
	  var year = date.getFullYear(),
        month = ("0" + (date.getMonth() + 1)).slice(-2),
        sdate = ("0" + date.getDate()).slice(-2),
        hour = ("0" + date.getHours()).slice(-2),
        minute = ("0" + date.getMinutes()).slice(-2),
        second = ("0" + date.getSeconds()).slice(-2);
      // 拼接
      var result =
        year +
        "-" +
        month +
        "-" +
        sdate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      // 返回
      return result;
    },
    onLoad() {
      var that = this;
      $postAxios(
        api.getUserContractOrderLis,
        {
          //已平仓跟已结束先显示一样的
          status: this.active == 3 ? 3 : this.active + 1,
          page: this.page,
          rows: 10,
        },
        (res) => {
          if (res.code == 0) {
            if (res.data.length) {
              if (that.page === 0) {
                that.list = res.data;
              
              } else {
                that.list = that.list.concat(res.data);
              }
              that.loading = false;
              that.page++;
            } else {
              that.finished = true;
            }
          } else {
            that.finished = true;
            that.loading = false;
          }
        }
      );
    },
    //平仓
    pingcang(id) {
      $postAxios(
        api.endContractOrder,
        {
          id: id,
        },
        (res) => {
          this.$toast(this.$t(res.msg));
          if (res.code == 0) {
            this.page = 0;
            this.list = [];
            this.onLoad();
          }
        }
      );
    },
    //撤单
    chedan(id) {
      $postAxios(
        api.cancelAutoContractOrder,
        {
          id: id,
        },
        (res) => {
          this.$toast(this.$t(res.msg));
          if (res.code == 0) {
            this.page = 0;
            this.list = [];
            this.onLoad();
          }
        }
      );
    },
    zhiying(id) {
      this.$router.push({
        name: "trade",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: rgba(247, 246, 251, 1);
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  ::v-deep.van-tabs {
    height: 100%;
    .van-tabs__wrap {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }
    .van-tabs__content {
      width: 100%;
      height: calc(100% - 40px);
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 0;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  .list {
    padding: 20px 0;
    .card {
      padding: 0 10px;
      background: #ffffff;
      border-radius: 5px;
      margin-bottom: 10px;
      .cardline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        .name {
          font-size: 13px;
          color: #8d9dbc;
        }
        .num {
          font-size: 13px;
          color: #333333;
        }
      }
      .btns {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 10px 0;
        .onebtn {
          width: 100px;
          padding: 5px 0;
          text-align: center;
          font-size: 13px;
          color: #ffffff;
          background: rgba(206, 77, 99, 1);
          margin-right: 10px;
          margin-bottom: 20px;
          border-radius: 50px;
        }
      }
    }
  }
}
</style>
